<template>
    <div class="row">
        <ul class="nav nav-tabs">
            <li v-for="(tab, index) in tabs" :key="index" :class="tab.active === true ? 'active' : ''">
                <a :href="'#' + tab.id" data-toggle="tab">{{tab.label}}</a>
            </li>
        </ul>
        <div class="tab-content">
            <slot/>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */

    export default {
        name: 'tabs',
        props: {
            tabs: {type: Array, required: true},
            onShow: {type: Function},
            onShown: {type: Function}
        },
        methods: {
            listenerEvent () {
                let tabs = $('a[data-toggle="tab"]', $(this.$el));
                tabs.on('show.bs.tab', e => {
                    if (this.onShow instanceof Function) {
                        this.onShow(e);
                    }
                });
                tabs.on('shown.bs.tab', e => {
                    if (this.onShown instanceof Function) {
                        this.onShown(e);
                    }
                });
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.listenerEvent();
            });
        }
    };
</script>

<style scoped>

</style>
